<template>
  <div class="c_box">
    <div class="header">
      <h3>车联网平台</h3>
    </div>
    <div class="main-container">
      <div class="left-chart-container">
        <Left-Chart-1 />
        <Left-Chart-2 />
        <Left-Chart-3 />
      </div>

      <div class="right-main-container">
        <div class="rmc-top-container">
          <!-- 地图 -->
          <div class="rmctc-left-container">
            <div>
              <Center-Cmp />
            </div>
          </div>

          <!-- 地图右侧 -->
          <div class="rmctc-right-container">
            <Right-Chart-1 />
            <Right-Chart-2 />
          </div>
        </div>

        <div class="rmc-bottom-container">
          <Bottom-Charts />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftChart1 from './LeftChart1'
import LeftChart2 from './LeftChart2'
import LeftChart3 from './LeftChart3'

import CenterCmp from './CenterCmp'

import RightChart1 from './RightChart1'
import RightChart2 from './RightChart2'
import BottomCharts from './BottomCharts'
export default {
  name: 'DataView',
  components: {
    LeftChart1,
    LeftChart2,
    LeftChart3,
    CenterCmp,
    RightChart1,
    RightChart2,
    BottomCharts
  },
  data () {
    return {}
  }
}
</script>

<style lang="less">
.header {
  margin: 0 auto;
  width: 100%;
  height: 66px;
  max-width: 1920px;
  background: url(./img/header.png) center no-repeat;
  margin-bottom: 20px;
  h3 {
    margin: 0;
    padding: 0;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    color: #5dc2fe;
  }
  .mh-middle {
    color: #fff;
    font-size: 30px;
  }
}

.main-container {
  height: calc(100% - 86px);
}

.left-chart-container {
  float: left;
  width: 22vw;
  height:  100%;
  > div {
    width: 100%;
    overflow: hidden;
    height: 29vh;
    margin-bottom: 1vh;
  }
}
// 右侧
.right-main-container {
  height:  100%;
  width: calc(100% - 22vw);
  float: left;
  box-sizing: border-box;
}
// 上边地图
.rmc-top-container {
  height: 59vh;
  display: flex;
}

// 地图
.rmctc-left-container {
    width: 56vw;
    height: 100%;
    padding: 15px;
    min-height: 170px;

    box-sizing: border-box;
    padding: 0 1vw;
    box-sizing: border-box;
    >div{
      width: 100%;
      height: 100%;
       background: url(./img/panel.png) center no-repeat;
    background-size: 100% 100%;
    padding:  1vw;
    box-sizing: border-box;
    }
}

// 地图右侧
.rmctc-right-container {
  width: 22vw;

}

.rmc-bottom-container {
  height:30%;
  padding-top: 2vh;
  box-sizing: border-box;
}

.rmctc-chart-1,
.rmctc-chart-2 {
  height: 50vh;
}
</style>
